<template>
	<div class="record" @keydown.enter='toGetData(actived)'>
		<div id="headbutn">
			<button :class="[actived === 7 ? 'btn-active':'btn-unactive']" class="button button--aylen" @click='toactive(7)'>日统计</button>
			<button :class="[actived === 8 ? 'btn-active':'btn-unactive']" class="button button--aylen" @click='toactive(8)'>月统计</button>
		</div>
		<div class="wrap">
			<div class="gradient-head">
				<h3>{{actived === 7 ? '日' : '月'}}可疑探测包记录</h3>
				<div class="search">
					<macinput :empty="true" class="mac_input"></macinput>
					<span @click='toGetData(actived)' class="butn button button--aylen">搜索</span>
				</div>
			</div>
			<div class="chart_wrap">
				<loading v-show= '!show'></loading>
				<transition name="fade"  mode="out-in">
					<div class="pic-wrap base-border" v-show='show'>
						<div id="recodeline"></div>
						<div class="legend">
							<p class="button button--aylen" @click="hide(0)"><span class="blocks redblock "></span>&nbsp;&nbsp;port</p>
							<p class="button button--aylen" @click="hide(1)"><span class="blocks blackblock"></span>&nbsp;&nbsp;sum</p>
							<p class="button button--aylen" @click="hide(2)"><span class="blocks greenblock"></span>&nbsp;&nbsp;icmp</p>
						</div>					
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>
<script>
	import formatTest from 'libs/formatTest'	
	import macinput from 'components/libs/macinput'
	import loading from 'components/common/loading'	

	import logManageService from 'services/logManageService'
	export default {
		components: {
			macinput,
			loading
		},
		data() {
			return {
				actived: 7,
				recordData: [],
				show: false,
				picchart: null
			}
		},
		created() {
			this.getData({subt: 7})
		},
		watch: {
			xaxis: function() {
				this.loadLine()	
			}
		},
		computed: {
			xaxis: function() {
				let x_temp = []
				if (this.recordData) {
					for(let i = 0; i < this.recordData.length; i++) {
						x_temp[i] = this.recordData[i].x
					}
				}
				return x_temp
			},
			yaxis: function() {
				let y_temp = {
					'port': [],
					'sum': [],
					'icmp': []
				}
				if (this.recordData) {
					for(let i = 0; i < this.recordData.length; i++) {
						y_temp.port[i] = Number(this.recordData[i].port)
						y_temp.sum[i] = Number(this.recordData[i].sum)
						y_temp.icmp[i] = Number(this.recordData[i].icmp)
					}
				}
				return y_temp
			}
		},
		methods: {
			toactive: function(n) {
				this.actived = n
				this.getData({subt: n})
			},
			getData: function(params) {				
				logManageService.getStatistic(params)
					.then((res) => {
						if (res.errcode === 0) {
							this.show = true
							this.recordData = res['4'][params.subt]
						}
					})
			},
			toGetData(type) {							
				let macIP = this.macVal(".mac_input")
				this.getData({subt: type, attack_source: macIP})				
			},
			macVal(ele) {
				let macVal = ($(ele + ' .mac_a').val() ? $(ele + ' .mac_a').val() : "") +
				($(ele + ' .mac_b').val() ? ':' + $(ele + ' .mac_b').val() : "") +
				($(ele + ' .mac_c').val() ? ':' + $(ele + ' .mac_c').val() : "") +
				($(ele + ' .mac_d').val() ? ':' + $(ele + ' .mac_d').val() : "") +
				($(ele + ' .mac_e').val() ? ':' + $(ele + ' .mac_e').val() : "") +
				($(ele + ' .mac_f').val() ? ':' + $(ele + ' .mac_f').val() : "")
				
				return macVal
			},
			hide(Index) {
				this.picchart.series[Index].setVisible()
			},
			loadLine() {
				let _this = this
				Highcharts.setOptions({
					colors: ['#c33a36', '#2f4554', '#2b7934'],
					credits: {enabled: false },
					exporting: {enabled: false},
					legend: {enabled: false}
				});
				this.picchart = Highcharts.chart('recodeline', {
          chart: {	zoomType: 'x' },
					title: {text: null},
					xAxis: {
						tickPixelInterval: 150,
						gridLineWidth: 1,
						gridLineDashStyle: 'Dash',
						tickInterval: _this.actived==10?3:1,
						categories: this.xaxis,
					},
					yAxis: {
						title: {text: '可疑探测包（个）'},
						gridLineWidth: 1,
						allowDecimals: false,
					},
					plotOptions: {
						line: {
							dataLabels: {enabled: true}
						},
						series: {
							marker: {
								radius: 3,
								symbol: 'circle'
							}
						}
					},
					tooltip: {valueSuffix: '个'},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
					},
					series: [{
						name: 'port',
						data: this.yaxis.port
					}, {
						name: 'sum',
						data: this.yaxis.sum
					}, {
						name: 'icmp',
						data: this.yaxis.icmp
					}],
					lang: {
						noData: "暂无数据",
						loading: '载入中..',
						resetZoom: 'Reset Zoom'
					},
					noData: {
						style: {
							fontSize: '15px',
							color: '#999999'
						}
					}
				})
			}
		}
	}
</script>
<style scoped>
	#headbutn {
		font-size: 14px;
		margin: 10px 0;
	}	
	.button {
		padding: 0 10px;
		height: 22px;
		border-radius: 3px;
		font-size: 12px;
		margin-right: 10px;
	}
	
	.title {
		padding-left: 15px;
	}
	h3 {
		height: 30px;
		line-height: 30px;
		display: inline-block;
	}	
	.search {
		float: right;
		margin-top:4px;
	}	
	.search .butn {
		color: #FFFFFF;
		width: 50px;
		text-align: center;
		cursor: pointer;
		background: #ffae00;
		border-radius: 3px;
		display: inline-block;
		height: 20px;
		line-height: 20px;
		margin: 0 20px 0 10px;
	}
	input{
		width: 20px;
		height: 100%;
		text-align: center;
	}
	.mac_input input{
		color: #ffffff;
	} 
	.input_wrap{
    display: inline-block;	
		width: 180px;
		height: 20px;
		border-radius: 3px;
	}
	input:focus{
		outline: none;
	}
	.chart_wrap{
		position: relative;
		height: 320px;
		border: 1px solid #e4e4e4;
	}
	.pic-wrap {
		width: 100%;
		height: 300 px;
		padding: 5px 10px 0px;
		box-sizing: border-box;
	}
	
	#recodeline {
		width: 1040px;
		height: 300px;
		box-sizing: border-box;
		display: inline-block;
	}
	
	.legend {
		display: inline-block;
		width: 70px;
		vertical-align: top;
		margin-top: 20px;
	}
	.legend p{
		height: 20px;
		line-height: 18px;
		padding-left: 5px;
		margin-bottom: 10px;
		border-radius: 3px;
		cursor: pointer;
	}
	.blocks {
		display: inline-block;
		width: 10px;
		height: 10px;
		vertical-align: middle;
	}
	.redblock {
		background: #c33a36;
	}
	
	.blackblock {
		background: #2f4554;
	}
	
	.greenblock {
		background: #2b7934;
	}
</style>